<template>
  <el-card>
    <div style="font-weight: bold; font-size: 25px">质检管理</div>
  </el-card>
  <el-card style="margin-top: 15px; margin-left: 15px; width: 80%">
    <!-- 顶部操作区 -->
    <div class="top-actions">
      <el-button type="primary" @click="exportData">导出</el-button>
      <!-- 把输入框移到右侧 -->
      <el-input
        v-model="quickSearch"
        placeholder="请输入关键词"
        style="width: 200px; margin-left: auto"
        @keyup.enter="handleQuickSearch"
      />
      <el-button type="info" size="small" @click="showAdvancedSearch = true">
        筛选
      </el-button>
    </div>
    <!-- 高级搜索弹窗 -->
    <el-dialog title="高级筛选" v-model="showAdvancedSearch" width="60%">
      <el-form :model="queryParams" label-width="100px">
        <!-- 第一行：质检工单主题 + 质检工单编号 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="质检工单主题">
              <el-input
                v-model="queryParams.Quaworksubject"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质检工单编号">
              <el-input
                v-model="queryParams.Quaworkcode"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：来源工单 + 生产物品 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="来源工单">
              <el-input v-model="queryParams.WorkCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产物品">
              <el-input v-model="queryParams.Goodsname" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

            <!-- 第三行：质检负责人 + 质检部门 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="质检负责人">
                  <el-input
                v-model="queryParams.QualityUsername"
                placeholder="请输入"
               />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAdvancedSearch = false">关闭</el-button>
          <el-button @click="resetAdvancedForm()">清空</el-button>
          <el-button type="primary" @click="getlist()">查询</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 表格区域 -->
    <div class="table-box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="quaworkname" label="质检工单名称" />
        <el-table-column prop="quaworkcode" label="质检工单编号" />
        <el-table-column prop="workCode" label="来源工单" />
        <el-table-column prop="goodsname" label="生产物品" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <span v-if="scope.row.status == 0">未完成</span>
            <span v-if="scope.row.status == 1">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="qualityUsername" label="质检负责人" />
        <el-table-column prop="processcount" label="工序数量" />
        <el-table-column prop="reportingcount" label="报工次数" />
        <el-table-column prop="inspectioncount" label="质检次数" />
        <el-table-column prop="meeage" label="备注" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="text" @click="editWork(scope.row)"
              >编辑工单</el-button
            >
            <el-button type="text" @click="viewWork(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="page.PageIndex"
        v-model:page-size="page.PageSize"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
        background
        @current-change="getTableData"
        @size-change="getTableData"
        style="margin-top: 20px; justify-content: center"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import myaxios from "@/Http/http";
import router from "@/router";
import { ref, reactive, onMounted } from "vue";

const handleQuickSearch = () => {
  // 快速搜索逻辑
  getTableData();
};
const showAdvancedSearch = ref(false);
const quickSearch = ref("");
// 查询参数
const queryParams = reactive({
  Quaworksubject: "",
  Quaworkcode: "",
  WorkCode: "",
  Goodsname: "",
  QualityUsername: "",
});

const getlist = () => {
  showAdvancedSearch.value = false;
  getTableData();
};

// 分页参数
const page = reactive({
  PageIndex: 1,
  PageSize: 10,
  totalcount: 0,
});

// 表格数据
const tableData = ref([]);

// 获取数据
const getTableData = () => {
  myaxios
    .get("api/Quality/GetQualityList", {
      params: {
        PageIndex: page.PageIndex,
        PageSize: page.PageSize,
        Quaworksubject: queryParams.Quaworksubject || undefined, // 展开所有查询参数
        Quaworkcode: queryParams.Quaworkcode || undefined,
        WorkCode: queryParams.WorkCode || undefined,
        Goodsname: queryParams.Goodsname || undefined,
        QualityUsername: queryParams.QualityUsername || undefined,
      },
    })
    .then((res) => {
      tableData.value = res.data.listResult;
      page.totalcount = res.data.totalcount;
    });
};

// 清空
const resetAdvancedForm = () => {
  for (const key in queryParams) {
    (queryParams as any)[key] = "";
  }
  getTableData();
};

// 编辑 / 查看
const editWork = (_row: any) => {
  router.push("/addquality");
};

const viewWork = (row: any) => {
  router.push({
    path: "/qualitywork",
    query: { id: row.id },
  });
  localStorage.setItem("qualityid", row.id);
};

// 初始化加载
onMounted(() => {
  getTableData();
});

// 导出功能（占位）
const exportData = () => {
  console.log("导出数据");
};
</script>

<style scoped>
.quality-management {
  padding: 20px;
}

.search-box {
  margin-bottom: 20px;
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.table-box {
  background: white;
  padding: 1px;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.top-actions {
  display: flex;
  align-items: center;
}
</style>
